<script setup lang="ts">
import { ref } from 'vue';

// 1. 控制DOM的显示和隐藏
const isShow = ref(false)
const toggle = () => {
  isShow.value = !isShow.value
}
</script>

<template>
  <button @click="toggle">显示/隐藏</button>
  <div v-show="isShow" class="box1">用v-show控制</div>
  <div v-if="isShow" class="box2">用v-if控制</div>
</template>

<style>
.box1 {
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}

.box2 {
  width: 200px;
  height: 100px;
  background-color: green;
}
</style>
